<template>
  <div :ref="name" style="margin-top:100px" class="page7-block">
    <div style="width:1280px;margin:0 auto;position: relative">
      <div class="page7-title"><img src="../../../../static/images/title.png" style="width:323px;"/></div>
      <div class="page7-con" style="position: relative">
        为响应习总书记“共同呵护好孩子的眼睛，让他们拥有一个光明的未来”的号召，动员全社会来监测视力状态，王勤美教授牵头精心设计推出公益“在线检测视力”，让人人足不出户就能检测自己和家人的视力，使便捷精准的视力检测走进千家万户。
        <img src="../../../../static/images/code.png" style="width:168px;display: block;margin:20px auto"/>
        <img src="../../../../static/images/button.jpg" style="width:168px;position: absolute;right:0px;bottom:80px;cursor: pointer"/>
      </div>

      <div class="code-text">微信扫一扫使用小程序测视力</div>
      <div style="padding-left:50px;margin-top:-180px">
        <img src="../../../../static/images/man.png" style="height:330px"/>
      </div>
      <div style="position: absolute;right:30px;bottom:30px">
        <img src="../../../../static/images/bottom1.png" style="height:65px"/>
      </div>
    </div>

  </div>
</template>

<script>

export default {
  props:{
    name:'',
  },
  components: {

  },
  computed: {

  },
  methods: {
    toDiv(){
      window.scrollTo({
        //滚动到元素位置
        top: this.$refs[this.name].getBoundingClientRect().top + window.scrollY,//推荐使用。getBoundingClientRect 相对于当前视口的位置
        behavior: "smooth" // 平滑滚动
      });
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

  .page7-block{
    background: url("../../../../static/images/page1bg.png") no-repeat;
    background-size: cover;
    .page7-title{
      padding:30px 30px 0 30px ;
    }
    .page7-con{
      width: 870px;
      font-size: 26px;
      font-weight: 400;
      color: #141313;
      line-height: 46px;
      margin:0 auto;
      padding:50px 0;
    }
    .code-text{
      height: 20px;
      font-size: 21px;
      font-weight: normal;
      color: #141313;
      line-height: 20px;
      text-align: center;
      text-align: center;
    }

  }


</style>

